<template>
  <PageContainer>
    <Header title="申请成为好友" :back="true" />

    <view class="hb-p-4">
      <tm-form
        @submit="handleSubmit"
        layout="vertical"
        :model-value="formData"
        :margin="[0, 0]"
        :padding="[0, 0]"
        :border="false"
        :rules="rules"
        :label-align="'top'"
        :transparent="true"
      >
        <!-- 申请说明输入区域 -->
        <view class="hb-bg-white hb-rounded-lg hb-p-3 hb-box-shadow-base hb-mb-2.5">
          <tm-form-item
            required
            field="applyContent"
            label="申请成为好友说明"
            :border="false"
            :margin="[0, 0]"
            :errorLabel="''"
          >
            <TmInput
              v-model="formData.applyContent"
              :height="160"
              :font-size="28"
              :inputPadding="[16, 16]"
              placeholder="一句话介绍你的智能助手"
              type="textarea"
            />
          </tm-form-item>
        </view>

        <!-- 标签选择区域 -->
        <view class="hb-bg-white hb-rounded-lg hb-p-3 hb-box-shadow-base">
          <tm-form-item field="selectedTags" label="设置标签" :border="false" :margin="[0, 0]">
            <view class="hb-flex hb-flex-wrap hb-gap-2">
              <!-- 已选标签 -->
              <view v-for="(tag, index) in selectedTags" :key="index">
                <tm-tag
                  :label="tag.label"
                  :closable="true"
                  :round="4"
                  :fontSize="24"
                  color="#F2F3F5"
                  :font-color="'#333'"
                  :follow-theme="false"
                  :margin="[0, 0]"
                  size="xs"
                  @close="removeTag(tag.id)"
                ></tm-tag>
              </view>
            </view>
            <!-- 添加标签按钮 -->
            <view class="hb-mt-2">
              <tm-tag
                label="+ 添加标签"
                :round="4"
                :fontSize="24"
                :padding="[16, 12]"
                color="#D0F7FF"
                :font-color="'#2878FF'"
                :follow-theme="false"
                :margin="[0, 0]"
                size="xs"
                @click="handleAddTag"
              ></tm-tag>
            </view>
          </tm-form-item>
        </view>
        <!-- 底部发送按钮 -->
        <view
          class="hb-fixed hb-bottom-0 hb-left-0 hb-right-0 hb-px-4 hb-py-2.5 hb-bg-white hb-box-shadow-base"
        >
          <tm-button
            :round="10"
            label="发送申请"
            :fontSize="32"
            :padding="[0, 24]"
            block
            color="#2878FF"
            :loading="loading"
            form-type="submit"
          ></tm-button>
        </view>
      </tm-form>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  import { ref, computed, reactive } from 'vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import { navigateBack } from '@/router';
  import { addFriend } from '@/api/aiChatPage';
  import { AddFriendInfo } from '@/api/aiChatPage/types';
  import { LabelListResult } from '@/api/contact/types';

  // 表单数据
  const formData = reactive<AddFriendInfo>({
    applyContent: '',
    beApplyBotUUid: '',
    labelIds: [],
  });

  const selectedTags = ref<LabelListResult[]>([]);
  customOnload<'AddFriend'>((options) => {
    formData.beApplyBotUUid = options.beApplyBotUUid;
  });

  // 加载状态
  const loading = ref(false);

  // 表单验证规则
  const rules = {
    applyContent: [{ required: true, message: '请填写申请说明', trigger: 'submit' }],
  };

  // 移除标签
  const removeTag = (id: number) => {
    selectedTags.value = selectedTags.value.filter((tag) => tag.id !== id);
  };

  // 添加标签
  const handleAddTag = () => {
    navigateTo({
      name: 'selectTags',
      options: {
        selected: selectedTags.value.map((item) => item.id),
        success: function (selected: LabelListResult[]): void {
          selectedTags.value = selected;
        },
      },
    });
  };

  // 提交申请
  const handleSubmit = async (e: Tmui.tmFormSubmitResult<typeof formData>) => {
    // 表单验证
    if (!e.isPass) return;
    // 防止重复提交
    if (loading.value) return;
    loading.value = true;
    // 使用表单验证
    try {
      await addFriend({ ...formData, labelIds: selectedTags.value.map((tag) => tag.id) });
      uni.showToast({
        title: '申请成功',
        icon: 'success',
      });
      setTimeout(() => {
        navigateBack();
      }, 1000);
    } catch (e) {
      console.error('表单验证失败', e);
    } finally {
      loading.value = false;
    }
  };
</script>

<style lang="scss" scoped></style>
